<template>
    <div class="drawer" >
      <div  class="aa" @click="open()"> <div class="font"> s1 </div></div>
    
      <div class="setbox" :class="{show: isshow}">
        <div class="header">
            <div id="mdmd">
    <mavon-editor />
    </div>
          <!-- <p class="fl">标题aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa标题aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa标题aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> -->
          <button class="off" @click="close">关闭</button>
        </div>
      </div>
    </div>
  </template>
  <script>
    export default {
      name:'drawer',
      data() {
        return {
          isshow: false
        }
      },
      methods: {
        close() {
          this.isshow = false
        },
        open(){
          this.isshow = true
        }
      }
    }
  </script>
  <style lang="scss" scoped>
    // .font{
        
    // }
    .aa {
        // height: 88.85%;
        height: 100%;
    }
    .drawer {
    //     top:0;
    //     bottom: 0;
    //   height: 100%;
    //   right: 0%;
    //   width:100%;
    //   display:flex;
    //   display:-webkit-flex;
    //   flex-direction:row;  
    // display: block;
    position: fixed;
    background: rgb(235, 224, 224);
    z-index:1000;
    // top: 10;
    // bottom: 0;
    right: 0%;
    // height: 88.85%;
    height: 100%;
    width: 4%;  
    border: 3px solid #585c5d;
      .setbox{
          position:fixed;
          z-index:1000;
        //   top:5.09%;
          bottom:0;
          width:80%;  //
        //   height:88.85%;
          height:100%;

          background:rgb(255, 255, 255);
          border-left: 1px solid #CFD8DC!important;
          box-shadow:0px 3px 12px rgba(0,0,0,0.12);
          -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
          right:-80%;
          padding:0px 0px 0px 20px;
      }
      .show {
       
       right: 0;
      }
      .off{
        font-size: 50;
      }
    }
  </style>